<template>
  <div>
    <v-sheet tile color="primary" dark>
      <v-container>
        <v-row justify="center" class="text-center my-12 py-12">
          <v-col cols="12">
            <v-badge color="secondary" overlap offset-x="-10">
              <template v-slot:badge>
                <p class="font-weight-bold">年前大力优惠中！</p>
              </template>
              <h1 class="text-h2 font-weight-black">双乐统计</h1>
            </v-badge>

            <h2
              class="my-6 grey--text text--lighten-1 text-h4 font-weight-medium"
            >
              见证计算的力量
            </h2>

            <v-btn
              class="my-6 text-capitalize"
              x-large
              color="secondary"
              to="/login"
              target="_black"
            >
              <v-icon left>mdi-login-variant</v-icon>登录账户
            </v-btn>

            <div class="my-6 text-body-2 grey--text text--lighten-1">
              <span>作者:</span>
              <br />
              <div class="my-6">
                <v-avatar color="secondary">
                   <img
        src="https://vallis.oss-cn-beijing.aliyuncs.com/vallis/wx.jpg?versionId=CAEQCxiBgMD.utLtuxciIDlhNDBkNjVmMGRlMzQ5MjM4ZDM1MmRmYmQ2ZGYwMzMz"
        alt="Vallis"
      >
                </v-avatar>
                <br />
                <div class="mt-2">Vallis</div>
              </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-sheet>

    <v-sheet tile class="py-12">
      <v-container>
        <div class="text-center my-12">
          <h2 class="text-h3 font-weight-bold">利用强劲的算力和优秀的算法</h2>
        </div>

        <div class="my-12">
          <v-row class="py-12" justify="space-between">
            <v-col cols="12" md="6">
              <v-card>
                <v-img
                  src="https://vallis.oss-cn-beijing.aliyuncs.com/vallis/calc.jpg?versionId=CAEQCxiBgMD.ifXtuxciIGM0NDE4NjkzMGJmYzQ2ODk4NGY3MGJiMTJiOWYwMDMw"
                ></v-img>
              </v-card>
            </v-col>
            <v-col cols="12" md="5">
              <div>
                <h3 class="text-h4 my-3">帮您省钱</h3>

                <div class="grey--text text--darken-1">
                  <h4 class="text-h6 my-3 font-weight-regular">
                    在开奖前统计出当期双色球、大乐透被购买最多的号码、组合
                  </h4>
                  <div class="my-5">
                    <p class="font-weight-regular">
                     您可以根据统计的信息来查找规律，亦或是排除掉不能中的号码，来帮助您选择更有可能的号码
                    </p>
                  </div>
                </div>

                <div class="my-12">
                  <v-btn color="secondary" class="text-capitalize" large
                    >查看说明</v-btn
                  >

                  <v-btn
                    outlined
                    large
                    :class="{ 'ml-3': $vuetify.breakpoint.smAndUp }"
                  >
                    <v-icon left>mdi-apps</v-icon>示例
                  </v-btn>
                </div>

                <div class="my-12">
                  <v-row align="center">
                    <v-col class="flex-grow-0">
                      <v-avatar color="secondary">
                       <v-icon large dark>mdi-bomb-off</v-icon>
                      </v-avatar>
                    </v-col>

                    <v-col class="flex-shrink-1">
                      <div>
                        <h4 class="text-body-1">帮助您在中奖的路上</h4>
                        <h3 class="subtitle font-weight-regular">少花冤枉钱</h3>
                      </div>
                    </v-col>
                  </v-row>
                </div>
              </div>
            </v-col>
          </v-row>

          <div class="my-12 text-center">
            <v-row>
              <v-col cols="6" md="3" v-for="(item, i) in frontFeature" :key="i">
                <v-avatar size="88" class="elevation-4">
                  <v-icon color="secondary" large>{{ item.icon }}</v-icon>
                </v-avatar>

                <br />

                <div class="mt-6 mb-1">
                  <h4 class="text-h5 font-weight-bold">{{ item.total }}</h4>
                </div>

                <div>
                  <h5 class="text-body-1">{{ item.text }}</h5>
                </div>
              </v-col>
            </v-row>
          </div>
        </div>

        <div class="my-12">
          <v-row class="py-12" justify="space-between">
            <v-col cols="12" md="5">
              <div>
                <h3 class="text-h4 my-3">安全、稳定、快速</h3>

                <div class="grey--text text--darken-1">
                  <h4 class="text-h6 my-3 font-weight-regular">

                  </h4>
                  <div class="my-5">
                    <p class="font-weight-regular">
                    系统经过长期测试，精简了大量的无用耗时的算法，直击巨奖
                    </p>
                  </div>
                </div>

                <div class="my-12">
                  <v-btn color="primary" class="text-capitalize" large
                    >查看说明</v-btn
                  >

                  <v-btn
                    outlined
                    large
                    :class="{ 'ml-3': $vuetify.breakpoint.smAndUp }"
                  >
                    <v-icon left>mdi-apps</v-icon>示例
                  </v-btn>
                </div>

                <div class="my-12">
                  <v-row align="center">
                    <v-col class="flex-grow-0">
                      <v-avatar color="primary">
                        <v-icon large dark>mdi-seal</v-icon>
                      </v-avatar>
                    </v-col>

                    <v-col class="flex-shrink-1">
                      <div>
                        <h4 class="text-body-1">已持续测试将近一年</h4>
                        <h3 class="subtitle font-weight-regular">获得大量用户芳心</h3>
                      </div>
                    </v-col>
                  </v-row>
                </div>
              </div>
            </v-col>

            <v-col cols="12" md="6">
              <v-card>
                <v-img
                  src="https://vallis.oss-cn-beijing.aliyuncs.com/vallis/fast.jpg?versionId=CAEQCxiBgIDmpbTuuxciIDJjY2VjMzM2ZDY1MTRjMGI4OWE1M2ZjNDRiM2Q3Yjg2"
                ></v-img>
              </v-card>
            </v-col>
          </v-row>

          <div class="my-12 text-center">
            <v-row>
              <v-col
                cols="6"
                md="3"
                v-for="(item, i) in dashboardFeature"
                :key="i"
              >
                <v-avatar size="88" class="elevation-4">
                  <v-icon color="primary" large>{{ item.icon }}</v-icon>
                </v-avatar>

                <br />

                <div class="mt-6 mb-1">
                  <h4 class="text-h5 font-weight-bold">{{ item.total }}</h4>
                </div>

                <div>
                  <h5 class="text-body-1">{{ item.text }}</h5>
                </div>
              </v-col>
            </v-row>
          </div>
        </div>
      </v-container>
    </v-sheet>

    <v-sheet tile class="py-12" color="transparent">
      <v-container>
        <div class="text-center my-12">
          <h2 class="text-h3 font-weight-bold">目前支持的功能</h2>

          <p class="text-h6 my-6">
           每一种功能都经过了线下的实际测试
            <br />我们挑选了其中最受欢迎的，并将其放在线上
          </p>
        </div>

        <div>
          <v-row justify="center" align="center">
            <v-col cols="6" md="3" v-for="(item, i) in awesomeFeature" :key="i">
              <v-card
                min-height="300px"
                class="d-flex align-center justify-center"
                outlined
              >
                <v-row
                  align="center"
                  justify="center"
                  class="text-center primary--text"
                  no-gutters
                >
                  <v-col cols="12">
                    <v-icon color="primary" size="48">{{ item.icon }}</v-icon>
                  </v-col>

                  <v-col cols="12" class="mt-5 mb-3">
                    <div>
                      <h5 class="text-h6">{{ item.text }}</h5>
                    </div>
                  </v-col>

                  <v-col cols="12" md="8">
                    <p>{{ item.subtext }}</p>
                  </v-col>
                </v-row>
              </v-card>
            </v-col>
          </v-row>
        </div>
      </v-container>
    </v-sheet>

    <v-sheet tile class="py-12" color="primary" dark>
      <v-container>
        <div class="text-center my-12">
          <h2 class="text-h3 font-weight-bold">
            如果
            <strong>你想</strong>, 一起 <strong>合作</strong>.....
          </h2>

          <p class="text-h6 my-6">
           请加入这个QQ群
            <br />97409528
             <br />
            谢谢
          </p>
        </div>

        <v-card outlined light>
          <v-card-text class="text-subtitle-1">
            <div>
              >年关将近
              <br />
              <span class="secondary--text">祝朋友们新春快乐</span>
            </div>

            <div class="my-6">
              >新春到来
              <br />
              <span class="secondary--text">
                祝用户们豪取大奖
              </span>
            </div>
          </v-card-text>
        </v-card>
      </v-container>
    </v-sheet>
  </div>
</template>

<script>
export default {
  name: "Home",
  data: () => ({
    frontFeature: [
      {
        text: "每期有至少20万注彩票",
        icon: "mdi-account-group",
        total: "30+人参与搜集",
      },
      {
        text: "任何时候实时查看数据",
        icon: "mdi-flash",
        total: "实时计算、不必等待",
      },
      {
        text: "每年双色球、大乐透期期不落",
        icon: "mdi-clock",
        total: "24小时不停止",
      },
      {
        text: "如果不满意，30天内全额退款",
        icon: "mdi-umbrella",
        total: "保障用户权益",
      },
    ],
    dashboardFeature: [
      {
        text: "您可以在电脑端查看本页面",
        icon: "mdi-monitor",
        total: "支持PC",
      },
      {
        text: "您可以在安卓手机端查看本页面",
        icon: "mdi-cellphone-android",
        total: "支持Android",
      },
      {
        text: "您可以在苹果手机端查看本页面",
        icon: "mdi-apple",
        total: "支持苹果",
      },
      {
        text: "您可以在微信端查看本页面",
        icon: "mdi-wechat",
        total: "支持微信",
      },
    ],
    awesomeFeature: [
      {
        text: "大乐透前区统计",
        icon: "mdi-arrow-left-circle",
        subtext: "将当期大乐透前区被购买的所有组合由低到高统计出来",
      },
      {
        text: "大乐透后区统计",
        icon: "mdi-arrow-right-circle",
        subtext: "将当期大乐透后区被购买的所有组合由低到高统计出来",
      },
      {
        text: "大乐透返奖率计算",
        icon: "mdi-percent-outline",
        subtext: "统计出往期大乐透的返奖率",
      },
      {
        text: "查看投注号码的中奖几率（大乐透）",
        icon: "mdi-select-compare",
        subtext: "输入自己的号码，对比搜集到的数据，查看中奖几率（*仅年费会员使用）",
      },
      {
        text: "双色球前区统计",
        icon: " mdi-arrow-left",
        subtext: "将当期大乐透前区被购买的所有组合由低到高统计出来",
      },
      {
        text: "双色球后区统计",
        icon: "mdi-arrow-right",
        subtext: "将当期大乐透后区被购买的所有组合由低到高统计出来",
      },
      {
        text: "双色球返奖率统计",
        icon: "mdi-percent",
        subtext: "统计出往期大乐透的返奖率",
      },
      {
        text: "查看投注号码的中奖几率（双色球）",
        icon: "mdi-compare",
        subtext: "输入自己的号码，对比搜集到的数据，查看中奖几率（*仅年费会员使用）",
      },
    ],
  }),
};
</script>
